<!--

    Author: Alex
    Date: 2021/9/25
-->

<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>五子棋</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <style>
        #chess {
            margin: 8% auto;
            display: block;
            cursor: pointer;
            background-color: #fee4b4;
        }
    </style>
</head>
<body>
<th:block th:include="introduce :: top"/>

<canvas id="chess" width="550px" height="550px"></canvas>

<div style="width:200px;margin: -50px auto;text-align: center;" id="toolsBar" hidden>
    <button class="layui-btn" onclick="toAGame()">再来一局</button>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/layer/layer.js"></script>
<th:block th:include="introduce :: topscript"/>
<script>
    var socket;

    function openSocket(userId) {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            var host = window.location.host;
            var socketUrl = "http://" + host + "/renjuserver/" + userId;
            socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
            if (socket != null) {
                socket.close();
                socket = null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                onmessage(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function () {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function () {
                console.log("websocket发生了错误");
            }
        }
    }

    function sendMessage(toUserId, content) {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log('{"toUserId":"' + toUserId + '","contentText":"' + content + '"}');
            socket.send('{"toUserId":"' + toUserId + '","contentText":"' + content + '"}');
        }
    }


    function customMessage(toUser, userId, status) {
        socket.send('{"toUser":"' + toUser + '","userId":"' + userId + '","status":"' + status + '"}');
    }


    var chessq = true;

    function duiyi(toUser, userId, x, y, player) {
        customMessage(toUser, userId, 201);
        socket.send('{"toUser":"' + toUser + '","userId":"' + userId + '","status":"2","x":"' + x + '","y":"' + y + '", "player": ' + player + ', "chess":' + chessq + '}');
        chessq = !chessq;
        pkText(toUser, 2);
    }
</script>
<script th:inline="javascript">
    var loadingIndex;
    var type = [[${type}]];
    var userId = [[${me}]];
    var toUserId = [[${to}]];

    var dUserId = "";
    var dToUserId = "";


    var playerw = true;
    if (type == 1) {
        openSocket(userId);
        pkText(toUserId);
    } else if (type == 2) {
        openSocket(userId);
        loadingIndex = layer.msg('正在等待对方进入', {icon: 16, shade: 0.5, time: 0});
    }

    function closeLoadingIndex() {
        layer.close(loadingIndex);
    }

    function clone() {
        clickFlag = false;
        $("#toolsBar").show();
    }


    //记录上一次对方下棋位置
    var lqwzx = 0, lawzy = 0;
    function onmessage(msg) {
        msg = JSON.parse(msg);
        /*
        * {"toUser":"陈洁","status":"0","x":"1","y":"1"}
        * status
        * -1:连接成功
        * 0:配对成功
        * 1:对方已掉线
        * 2:对弈
        *   201:到对方下棋
        * 3:通知对方自己赢了
        * 4:对方赢了征求对方同意是否开启新的一盘对弈
        *   401:同意重新开始
        *   402:拒绝重新开始
        * */
        var status = msg.status;
        if (status == "0") {
            closeLoadingIndex();
            toUserId = msg.toUser;
            pkText(toUserId);
        } else if (status == "1") {

        } else if (status == "2") {
            dUserId = msg.toUser;
            dToUserId = msg.userId;
            playerw = msg.player;
            chessq = msg.chess;

            //回显对方的下棋位置
            oneStep(msg.x, msg.y, msg.player);

            pkText(dToUserId, 1);


            //高亮显示对方下棋的位置
            if (lqwzx != 0 && lqwzy != 0) {
                oneStep(lqwzx, lqwzy, msg.player);
                lqwzx = msg.x, lqwzy = msg.y;
            }else{
                lqwzx = msg.x, lqwzy = msg.y;
            }
            context.beginPath();
            context.arc(15 + 37.1 * msg.x, 15 + 37.1 * msg.y, 4, 0, 2 * Math.PI)
            context.fillStyle = "red";
            context.fill();
        } else if (status == "201") {
            layer.msg("到你下棋了", {time: 600});
        } else if (status == "3") {
            clone();
            layer.alert("对方赢了");
        }
    }

    function pkText(to, type) {
        var text = to + " PK " + userId;
        if (type == 1) {
            text = text + " ←";
        } else {
            text = "→ " + text;
        }
        $("#userId").text(text);
    }

</script>
<script src="/js/renju.js"></script>
<script>
    //重新开始
    function toAGame() {
        /*context.clearRect(0,0,550,550);
        loadCanvas();
        wins = [];
        count = 0;
        isChess = [];
        manWin = [];
        computerWin = [];*/
        window.location.href = "/";
    }
</script>
</body>
</html>